<!--
 * @Author: 胡海
 * @Date: 2020-11-20 15:14:11
 * @LastEditors: 胡海
 * @LastEditTime: 2020-11-20 18:17:05
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的响应数据变化</title>
    <style>
        .red {
            background: red;
        }
        #app div {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input 
            v-for="item,index in tabData" 
            type="button" 
            v-bind:value="item.title" 
            v-bind:class="{red:i === index}" 
            v-on:click="tabHandle(i)"/>
        <div v-bind:style="{display: j  === index ? 'block' : 'none'}" v-for="item,j in tabData">
            <p v-for="option in item.list">
                {{option.subTitle}}
            </p>
        </div>
    </div>
    <script>
        let tabData = [
            {
                title: "新闻",
                list: [
                    {
                        subTitle: '今天很不好'
                    },
                    {
                        subTitle: '今天很不好'
                    },
                    {
                        subTitle: '今天很不好'
                    }
                ]
            },
            {
					title:'体育',
					list: [
						{
							subTitle:'冠军'
						},
						{
							subTitle:'冠军'
						}
					]
			},
            {
					title:'娱乐',
					list: [
						{
							subTitle:'结婚了'
						},
						{
							subTitle:'出轨了'
						}
					]
			}
        ]

        let buttons = ['按钮1', '按钮2', '按钮3']
        /*
        条件判断
          v-if
          语法： v-if="表达式"
           v-show
          语法： v-show="表达式"
          */
        let vm = new Vue({
            el: '#app',
            data:{  // 只有计划好的数据，才能做相应reactive
                tabData,
                index:0
            },
            methods: {
                tabHandle (i) {
                    console.log(i);
                    this.index = i;
                }
            }
        })
        /*
        提供了观察数组的变异方法，使用这些方法将会触发视图更新
        push()、pop()、shift()、unshift()、splice()、sort()、reverse()
        会改变原数组
        */
        //vm.list.push(1000)

        //不会改变原数组
        //vm.list = vm.list.map(item => item*3)

        // 同过下标改变值不可以
        //vm.list[0] = 'miaov';
        //可以这样使用
        //vm.list.splice(0,1,"miaov");

        // length是不能改变原数组的
        vm.list.length = 1;



    </script>
</body>
</html>